import React, { useEffect, useState } from 'react'
import "../../api/Data"
import request from "../../api/request"
import { useDispatch, useSelector } from "react-redux"
import { GETHISTORY, ALLSTATE, GETBUY } from "../../types/store.d"
import { Toast, NavBar, Search, DropdownMenu , Image, ProductCard, Tag, Grid, Button } from 'react-vant';
import { WeappNav, Aim, AddO } from '@react-vant/icons';
import Leftclassify from '../../components/Leftclassify'
import { useNavigate } from 'react-router'
function Searchs() {
  const [value, setValue] = useState('');
    const dispatch = useDispatch()
  const navigate = useNavigate()
  useEffect(() => {
    request.get("/api/history").then(res => {
      dispatch({
        type: GETHISTORY,
        payload: res.data.history
      })
    })
  }, [])
  useEffect(()=>{
    request.get("/api/buy").then(res => {
      dispatch({
        type: GETBUY,
        payload: res.data.buy
      })
    })
  },[])
  const historyArr = useSelector((state: ALLSTATE) => {
    return state.historyArr
  })
  const buyArr = useSelector((state: ALLSTATE) => {
    return state.buyArr
  })
  console.log(buyArr);
  
  return (
    <div>
         <header>
        <NavBar
          title="每日优鲜"
          onClickLeft={() => navigate("/home/classify")}
        />
        <div onClick={()=>navigate("/search")}>
          <Search
          shape="round"
          background="#ccc"
          value={value}
          onChange={setValue}
          placeholder="请输入"
        />
        </div>
      </header>
      <div className="demo-button">
        <h4 style={{margin:"10px 0"}}>热门搜索</h4>
        {
          historyArr.map((item:any,index:number)=>{
            return  <Button color="pink" round key={index} style={{margin:"5px"}}>{item.title}</Button>
          })
        }
    </div>
    <h4 style={{margin:"10px 0"}}>常买</h4>
    {
          buyArr.map((item:any,index:number)=>{
            return  <div key={index} style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
               <Image width="100" height="100" src={item.img} />
               <div>
                 <p>{item.title}</p>
                 <p>买{item.count}次</p>
               </div>
            </div>
          })
        }
    </div>
  )
}

export default Searchs